<template>
  <view>
    <uv-loading-page
      v-if="!info"
      :loading="!info"
      bg-color="rgba(0,0,0,.5)"
    ></uv-loading-page>
    <view v-else>
      <view
        class="goods-head"
        :style="'background:rgba(255,255,255,' + scrollTop / 100 + ')'"
      >
        <!-- tab切换 -->
        <view class="head-tab" v-if="scrollTop > 50">
          <uv-tabs
            :activeStyle="{
              color: '#FF4949'
            }"
            :inactiveStyle="{
              color: '#333'
            }"
            lineColor="#FF4949"
            :list="tabslist"
            @change="onTab"
          ></uv-tabs>
        </view>
      </view>
      <scroll-view
        :scroll-into-view="intoView"
        :scroll-with-animation="true"
        class="info_top bgf9"
        @scroll="scroll_go"
        scroll-x="false"
        scroll-y="true"
        ref="scroll"
      >
        <view class="scroll-item">
          <swiper
            @change="viewChange"
            :style="[{ height: swiperHeight + 'px' }]"
            :indicator-dots="true"
            class="info_banner"
            circular
            :autoplay="true"
            :interval="3000"
            :duration="500"
          >
            <swiper-item
              v-if="info?.pictures?.length > 0"
              v-for="(item, index) in info.pictures"
            >
              <view
                @click="imageClick(index)"
                style="width: 100%; height: 100%"
              >
                <image
                  class="swiper_img"
                  mode="widthFix"
                  :src="item"
                  @load="loadImg"
                ></image>
              </view>
            </swiper-item>
          </swiper>
          <view class="info">
            <view class="name font16333">{{ info.name }}</view>
            <view class="qian">
              <view
                ><text class="priceFontB">￥{{ info.price }}</text
                ><text class="qian_o font14999"
                  >￥{{ info.original_price }}</text
                >
              </view>
              <view class="t-wall">{{ info?.sale_count }}人已购买</view>
            </view>
            <!-- 商品购买/服务/参数 -->
            <view class="info_t1 mb20">
              <SpecsOptions ref="specsOptionsRef" :id="id" />
              <ProductOptions :id="id" />
              <ServicesOptions :id="id" />
            </view>
            <!-- 评论 -->
            <view class="info_t1" id="selector1">
              <Comment
                :shopId="info.uuid"
                :commentTotal="info.comment_total"
                :commentlist="info.comment_list"
                :more="true"
              />
            </view>
          </view>
          <!--  -->
          <view class="shop_details" id="selector2">
            <view class="shop_title"> -商品详情- </view>
            <view class="shop_video" v-if="!!info.video">
              <video
                object-fit="cover"
                class="video"
                :src="info.video"
                :autoplay="true"
                :show-mute-btn="true"
              ></video>
            </view>
            <view class="shop_img">
              <image
                v-for="item in info.detail.images"
                :src="item"
                mode="widthFix"
                style="width: 100%"
              ></image>
            </view>
          </view>
          <!-- end -->

          <!-- 商品推荐 -->
          <view id="selector3">
            <view class="tj_title font16333"> 相关推荐 </view>
            <Recommend :uuid="id" />
          </view>
          <!-- end -->
        </view>
      </scroll-view>
    </view>

    <view class="info_bottom">
      <view @click="goPaly" class="goPaly">立即购买</view>
    </view>
  </view>
</template>

<script>
import { pxtoRpx } from "@/utils/shopUtils/index";
import Comment from "@/pages/shop/components/comment.vue";
import { shopApiProduct } from "@/api/shopApi/index";
import SpecsOptions from "../components/specsOptions.vue";
import ServicesOptions from "../components/servicesOptions.vue";
import ProductOptions from "../components/productOptions.vue";
import Recommend from "../components/recommend.vue";

import useOrder from "@/store/order";
const { order } = useOrder();
export default {
  components: {
    Comment,
    ProductOptions,
    SpecsOptions,
    ServicesOptions,
    Recommend
  },
  props: {
    productId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      id: -1,
      info: null,
      c_width: uni.getSystemInfoSync().windowWidth,
      c_height: uni.getSystemInfoSync().windowHeight,
      image_height: 0,
      statusHeight: 0,
      scrollTop: 0,
      back_to_top: false,
      swiperHeight: 400,
      current: 0,
      intoView: "",
      tabslist: [
        {
          name: "评价"
        },
        {
          name: "详情"
        },
        {
          name: "推荐"
        }
      ]
    };
  },
  mounted() {
    console.log("onmounted");
    this.$emit("onload");
  },
  onLoad(option) {
    if (option.id || option.mid_id) {
      this.id = option.id;
      this.mid_id = option.mid_id;
      this.init();
    }

    this.$emit("onload");
  },
  methods: {
    async init() {
      const info = await this.productInfo();
      var w = pxtoRpx(this.c_width);
      this.image_height = w;
      order.orderInfo = info;
      return info;
    },
    // 获取商品详情
    async productInfo() {
      const param = {};
      if (this.id) {
        param.uuid = this.id;
      }
      if (this.mid_id) {
        param.mid_id = this.mid_id;
      }
      const { data } = await shopApiProduct(param);
      console.log("res", data);
      if (data.error_code !== 0) {
        uni.navigateBack();
        uni.showToast({
          title: "商品不存在",
          icon: "none"
        });
        return;
      }
      this.info = data.data;
      return this.info;
    },
    goPaly() {
      const { state, open } = this.$refs.specsOptionsRef;
      if (!state.currentInfo) {
        open();

        uni.showToast({
          title: "请选择规格",
          icon: "none"
        });
        return;
      }
      state.currentInfo.num = state.num; //选中数量
      order.orderInfo.specs = state.currentInfo; //存储规格
      uni.navigateTo({
        url: "/pages/shop/index/order_create"
      });
      // this.$refs.specsOptionsRef.open();
    },
    leftClick() {
      uni.navigateBack();
    },
    onTab(e) {
      this.intoView = "selector" + (e.index + 1);
      // console.log(document.getElementById(this.intoView).offsetTop);
    },
    imageClick(index) {
      uni.previewImage({
        current: index,
        urls: this.info.pictures
      });
    },

    scroll_go(event) {
      if (parseInt(event.detail.scrollTop) < 200) {
        this.scrollTop = event.detail.scrollTop;
      }
    },

    loadImg() {
      this.getCurrentSwiperHeight(".swiper_img");
    },
    // 轮播切换
    viewChange(e) {
      this.current = e.detail.current;
      this.getCurrentSwiperHeight(".swiper_img");
    },
    // 动态获取内容高度
    getCurrentSwiperHeight(element) {
      try {
        let query = uni.createSelectorQuery().in(this);
        query.selectAll(element).boundingClientRect();
        query.exec(res => {
          if (this.info?.pictures?.length && res[0][this.current]?.height) {
            this.swiperHeight = res[0][this.current].height;
          }
        });
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.video {
  width: 100%;
}

.info_top {
  // padding-bottom: 200rpx;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  left: 0;
}

.info_bottom {
  z-index: 0;
}
.info_bottom .goPaly:active {
  background: #f30;
}

.info_banner {
  width: 100%;
  transition: all 0.6s;
}

.info_banner image {
  width: 100%;
  height: 100%;
}
.t-wall {
  border-radius: 5px;
  background: #fdefec;
  color: #ff7c7c;
  text-align: center;
  margin-left: 10px;
  padding: 4px 6px;
  font-size: 24rpx;
}
.info_t1 {
  width: 92%;
  padding: 20rpx 0;
  background: #fff;
  margin: 0 auto;
  border-radius: 20px;
}

.info {
  width: 100%;
  padding-top: 10px;
}

.info .name {
  line-height: 40rpx;
  padding: 20rpx 4%;
}

.info .qian {
  padding: 20rpx 4%;
  width: 92%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  height: 40rpx;
  margin-bottom: 10rpx;
  color: #92ffec;
}

.info .qian_o {
  text-decoration: line-through;
  padding-left: 40rpx;
}

.info .num_n {
  color: #f60;
  font-size: 28rpx;
  margin-right: 20rpx;
}

.info .num_o {
  color: #06f;
  font-size: 28rpx;
}

.info .clas {
  padding: 0 4%;
  width: 92%;
  height: 60rpx;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.info .clas view {
  padding: 0 10rpx;
  height: 60rpx;
  line-height: 56rpx;
  padding: 0 10px;
  background: #eee;
  color: #000;
  margin-right: 20rpx;
  border-radius: 8rpx;
}

.info .mark {
  line-height: 40rpx;
  padding: 20rpx 4%;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.info .tags {
  padding: 0 4%;
  width: 92%;
  padding-bottom: 20rpx;
}

.info .tags text {
  padding: 5rpx 10rpx;
  margin-right: 20rpx;
  line-height: 40rpx;
  color: #f30;
  border: solid 1rpx #f30;
  border-radius: 10rpx;
}

.info .contnet {
  padding: 20rpx 4%;
  width: 92%;
}

.share_panel {
  padding-top: 20rpx;
  height: 200rpx;
  background: #fff;
  width: 92%;
  padding: 0 4%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.share_panel view {
  width: 120rpx;
  height: 120rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
}

.share_panel text {
  margin-top: 10rpx;
}

.shop_details {
  // padding: 0 4%;
  font-size: 0;

  .shop_title {
    color: #999;
    font-size: 24rpx;
    text-align: center;
    padding: 36rpx 0;
  }
}
.scroll-item {
  padding-bottom: 130rpx;
}

.goods-head {
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  // height: 100rpx;
  background: rgba(255, 255, 255, 0);
  /* #ifdef APP-PLUS */
  height: calc(100rpx + var(--status-bar-height));
  /* #endif */
  /* #ifdef MP */
  // height: 200rpx;
  /* #endif */
}
</style>
